<style lang="less" scoped>
.cf {
  clear: both;
}
.noDate_page {
  padding-top: 2rem;
}
</style>

<!--司机端提货签收列表页-->
<template>
  <div class="gridContainer">
    <!-- <manage-header></manage-header>
    <header-car :status="6"></header-car> -->

    <scroller lock-x
              scrollbar-y
              use-pullup
              :height="scrollerHeight"
              @on-pullup-loading="getData"
              v-if="totalRecords > 0"
              :pullup-config="ScrollerConfig"
              ref="Scroller">
      <div>
        <div class="acpt-list"
             v-for="(item, index) in datas">
          <div class="car-pc-title cf listing">
            <span class="f-l">
              <i class="llse llse-huoche"></i>
              <b class="atvno">{{item.ATVNo}}</b>
            </span>
            <!-- <em class="f-r">
              <div class="btn ml10"
                   v-if="item.PlanRouteState<18"
                   @click="enter(item.Driver1Guid,item.VehicleGuid,item.ATVGuid)">回车确认</div>
            </em> -->
            <!-- <em class="f-r"><div class="ml10" @click="">已回车</div></em> -->
            <!-- <em class="f-r"><div class="btn ml10" @click="transferAll(item.ATVGuid)">整车中转</div></em> -->
          </div>

          <div class="acpt-list-wrap mb30"
               v-for="atv in item.list">
            <div class="acpt-list-head cf">
              <span class="txt f-l">业务单号：{{atv.BBillNo}}</span>
            </div>
            <div class="displayflex acpt-list-body lineb">
              <span class="cargo">
                <i class="iconfont icon-cargo"></i>
                <p>{{atv.Pkgs}}件</p>
              </span>
              <div class="txt flex1">
                <p class="ft17">{{atv.PickContacts}} {{atv.PickContactsTel}}</p>
                <p>取货地址：{{atv.DepartureCity | city}}{{atv.DepartureDistrict | district}}{{atv.DepartureAddress}}</p>
                <p>送货地址：{{atv.ArrivalCity | city}}{{atv.ArrivalDistrict | district}}{{atv.ArrivalAddress}}</p>
              </div>
            </div>
            <div class="btn-grp txt-rit">
              <div class="btn ml10"
                   v-if="atv.LogState !='81'"
                   @click="viewOrderJs(atv.BBillGuid)">拒签</div>
              <div class="btn ml10"
                   v-if="atv.LogState !='81'"
                   @click="viewOrderQs(atv.BBillGuid)">代签收</div>
              <div class="btn ml10"
                   @click="viewOrderDetail(atv.BBillGuid)">详情</div>
              <div class="btn ml10"
                   @click="openQrCode(atv.BBillNo)"
                   v-if="atv.LogState == '56'">签收二维码</div>
            </div>
          </div>
        </div>
      </div>
    </scroller>

    <div class="noDate_page"
         v-if="totalRecords == 0">
      <div class="noDate_icon">
        <i class="iconfont icon-null"></i>
      </div>暂无数据，请通知所属公司派单！
    </div>
    <x-dialog v-model="showQrcode"
              class="qrcode-wrap">
      <div class="llse-cadd llse close"
           @click="showQrcode=false"></div>
      <qrcode class="qrcode-img"
              :value="qrCodeValue"></qrcode>
      <p class="qrcode-txt">请扫二维码确认签收</p>
    </x-dialog>
    <!--拒单弹窗 start-->
    <!-- <x-dialog :show.sync="popupVisible">
      <div class="">
        <h3 class="ft16 title">拒收货单原因</h3>
        <textarea placeholder="请填写其它原因"
                  v-model="Memo"
                  type="text"></textarea>
      </div>
      <div class="bottom-two-btn">
        <div class="carbtn refuse"
             @click="handleRefuse('0')"
             style="margin: 0.15rem 0.15rem 0.15rem 1.6rem;">取消</div>
        <div class="carbtn"
             @click="handleRefuse('1')"
             style="    margin: 0.15rem 1.6rem 0.15rem 0.15rem;">确认</div>
      </div>
    </x-dialog> -->
    <!--拒绝弹框end-->
    <div class="w100fix"></div>
    <footer-menu :status="2"></footer-menu>
  </div>
</template>

<script>
import manageHeader from "@/components/core/header/manage.header.vue";
import headerCar from "@/components/core/header/driver-progress.vue";
import footerMenu from "@/components/core/footer/manage.footer.vue";
import { mapGetters, mapState } from "vuex";
import { Qrcode, XDialog } from "vux";

export default {
  components: {
    footerMenu,
    headerCar,
    manageHeader,
    Qrcode,
    XDialog
  },
  data () {
    return {
      datas: [],
      popupVisible: false,
      showQrcode: false,
      totalRecords: 0,
      PageIndex: 1,
      PageSize: 8,
      noMore: false,
      ScrollerConfig: {
        content: "上拉加载",
        downContent: "上拉加载",
        height: 0,
        loadingContent: "加载中...",
        upContent: "上拉加载"
      },
      qrCodeValue: "",
      BBillGuid: '',
      Memo: '',
    };
  },
  computed: {
    ...mapState({
      pagetitle: state => state.cfg.appBarTitle,
      showstate: state => state.cfg.showAppBar
    }),
    ...mapGetters({
      scrollerHeight: "cfg/getConHeight"
    }),
    userinfo () {
      return localStorage.userinfo ? JSON.parse(localStorage.userinfo) : null;
    },
  },
  created () {
    this.getData();
  },
  mounted () {
    this.$store.dispatch("cfg/setConHeight");
  },
  methods: {
    openQrCode (billno) {
      this.showQrcode = true;
      this.qrCodeValue = billno;
    },
    getData () {
      let query = {
        DriverGuid: this.userinfo.StaffID,
        // State: "81",
        StateList: ["56"],
        PageIndex: this.PageIndex,
        PageSize: this.PageSize
      };
      this.Ajax.post("GetDriverOrderList", query).then(resp => {
        if (resp.IsSuccess) {
          this.totalRecords = resp.TotalRecords;
          if (resp.Datas && resp.Datas.length > 0) {
            this.PageIndex++;
            //this.datas = this.datas.concat(resp.Datas);
            let map = {},
              args = [];
            resp.Datas.forEach((x) => {
              if (!map[x.ATVNo]) {
                args.push({
                  ATVNo: x.ATVNo,
                  ATVGuid: x.AtvGuid,
                  Driver1Guid: x.Driver1Guid,
                  VehicleGuid: x.VehicleGUID,
                  PlanRouteState: x.PlanRouteState,
                  list: [x]
                });
                map[x.ATVNo] = x;
              } else {
                for (var i = 0; i < args.length; i++) {
                  if (args[i].ATVNo == x.ATVNo) {
                    args[i].list.push(x);
                    break;
                  }
                }
              }
            })
            args = args.sort((a, b) => a.ATVNo - b.ATVNo);
            console.log(args);
            this.datas = this.datas.concat(args);
            this.ScrollControl();
          }
        } else {
          this.Toast({
            message: "列表为空，请稍后刷新"
          });
        }
      });

      let by = function (name) {
        return function (o, p) {
          var a, b;
          if (typeof o === "object" && typeof p === "object" && o && p) {
            a = o[name];
            b = p[name];
            if (a === b) {
              return 0;
            }
            if (typeof a === typeof b) {
              return a < b ? -1 : 1;
            }
            return typeof a < typeof b ? -1 : 1;
          }
          else {
            throw ("error");
          }
        }
      };
    },

    enter (Driver1Guid, VehicleGuid, AtvGuid) {
      let query = {
        Driver1Guid: Driver1Guid,
        VehicleGuid: VehicleGuid,
        Guid: AtvGuid
      };
      this.Ajax.post("DriverEnter", query).then(resp => {
        if (resp.IsSuccess) {
          this.datas.forEach(item => {
            if (item.ATVGuid == AtvGuid) {
              item.PlanRouteState = '18';
            }
          });
          this.Toast({
            message: "回车成功"
          });

        } else {
          this.Toast({
            message: "回车失败" + resp.ErrorMessage
          });
        }
      });
    },
    viewOrderDetail (BBillGuid) {
      this.$router.push({
        path: "senddingdetailorder",
        query: {
          Guid: BBillGuid
        }
      });
    },
    viewOrderQs (BBillGuid) {
      this.$router.push({
        path: "/carrier/receiveconfirm",
        query: {
          Guid: BBillGuid
        }
      });
    },
    viewOrderJs (BBillGuid) {
      this.MessageBox.prompt('请输入拒单原因！').then(({ value, action }) => {
        this.popupVisible = true;
        this.BBillGuid = BBillGuid;
        this.Memo = value;
        this.handleRefuse();
      });

    },
    handleRefuse () {
      var ReceiverID = this.userinfo.StaffID;
      var ReceiverName = this.userinfo.Name;
      var PRContactsTel = this.userinfo.MobileNo;
      var signName = this.userinfo.Name;
      let query = {
        Guid: this.BBillGuid,
        Receiver: ReceiverID,
        ReceiverName: signName,
        PRContactsTel: PRContactsTel,
        Memo: this.Memo,
        ExpReason: this.Memo,
      };
      this.Ajax.post("RefusalreasonConfirm", query).then(resp => {
        if (resp.IsSuccess) {
          this.$vux.toast.show({
            text: '拒签成功',
            type: 'success',
            onHide () {
              location.reload();
            }
          });

        } else {
          this.Toast({
            message: "拒签失败" + resp.ErrorMessage
          });
        }
      });
    },
    ScrollControl () {
      if (this.totalRecords <= this.PageSize) {
        this.ScrollerConfig.content = "";
        this.noMore = true;
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
          });
        });
      }

      if (this.datas.length > 0 && this.$refs.Scroller) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.donePullup();
          });
        });
      }

      if (this.totalRecords == this.datas.length) {
        this.$nextTick(() => {
          this.$nextTick(() => {
            this.$refs.Scroller.disablePullup();
            this.noMore = true;
          });
        });
      }
    }
  }
};
</script>